<template>
    <el-card class="m-8">
        <section slot="header" class="mb-4 flex items-center justify-between">
            <div>
                <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
            </div>
                
            <!-- <div class="flex items-center justify-between">
                <span class="mr-4 block">宝箱名称：</span>
                <el-select v-model="listQuery.type" value-key="" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </div> -->
        </section>
        <el-radio-group v-model="tab" @input="radioChange" class="radioBox">
          <el-radio-button label="gold">金宝箱</el-radio-button>
          <el-radio-button label="silver">银宝箱</el-radio-button>
        </el-radio-group>
        <el-table :data="tableList" align="center" border class="mt-4" stripe>
            <el-table-column label="序号" prop="id"/>
            <el-table-column label="宝箱" prop="type">
                <template slot-scope="{row}">
                    {{ row.type === 'silver' ? '白银宝箱' : '黄金宝箱' }}
                </template>
            </el-table-column>
            <el-table-column label="出奖次数" prop="count" />
            <el-table-column label="产出" prop="output" />
            <el-table-column label="状态" prop="is_open">
                <template slot-scope="{row}">
                    <el-tag v-if="row.is_open === 1" type="success" size="normal"  effect="dark">开启</el-tag>
                    <el-tag v-else type="warning" size="normal"  effect="dark">关闭</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                    <el-button type="text" @click="handleDetails(row)">奖品详情</el-button>
                </template>
            </el-table-column>
        </el-table>
  
        <cus-pagination
            :limit.sync="listQuery.perPage"
            :page.sync="listQuery.page"
            :total="total"
            @pagination="initData"
        />
  
        <!-- 添加 -->
        
        <el-dialog
            :close-on-click-modal="false"
            :visible="addDialog2"
            lock-scroll
            :title="title"
            width="30%"
            @close="closeAddDialog2"
        >
                <el-form :model="form" ref="form" :rules="rules" label-width="150px" :inline="false" size="normal">
                    <el-form-item label="宝箱" prop='type'>
                        <el-select v-model="form.type" placeholder="请选择" clearable filterable>
                            <el-option v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" prop="is_open">
                        <el-radio-group v-model="form.is_open">
                            <el-radio :label="1">开启</el-radio>
                            <el-radio :label="0">关闭</el-radio>
                        </el-radio-group>
                        
                    </el-form-item>
                </el-form>
        
                <section slot="footer">
                    <el-button @click="addDialog2 = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit(row)">确定</el-button>
                </section>
        </el-dialog>
  
    </el-card>
</template>

<script>
  import {
    yearMidPoolList,
    // magicDel,
    yearMidPoolSave,
    // giftList
  } from '@/api/feedbackActivity'
  
  export default {
    data() {
      return {
        title: '新增',
        dialogVisible: true,
        selectData: '',
        tab: 'gold',
        options: [
            {
                value: 'silver',
                label: '白银'
            },
            {
                value: 'gold',
                label: '黄金'
            }
        ],
        tableList: [],
        user_code: '',
        listQuery: {
            type: 'gold',
            page: 1,
            perPage: 10,
        },
        meta: {
          page: 1,
          perPage: 10
  
        },
        total: 0,
        /* 弹出框开关 */
        addDialog: false,
        addDialog2: false,
  
        rejectLoading: false,
        passLoading: false,
        id: '',
        // 拒绝原因
        reject_reason: '',
        form: {
            id: undefined,
            type: undefined,
            is_open: 1,
        },
        rules: {
            type: [{ required: true, message: '请选择', trigger: 'blur' }],
            is_open: [{ required: true, message: '请选择', trigger: 'blur' }],
        },
      }
    },
    created() {
      this.initData()
    },
    methods: {
      handleAdd() {
        this.title = '新增'
        this.addDialog2 = true
      },
      handleSearch() {
        this.listQuery.page = 1
        this.initData()
      },
      handleReset() {
        this.listQuery = {
          type: 'gold',
          page: 1,
          perPage: 10,
        }
        this.initData()
      },
      async initData() {
        try {
          for (let key in this.listQuery) {
            this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
          }
          const { data } = await yearMidPoolList(this.listQuery)
          this.listQuery.page = data.meta.page
          this.total = data.meta.total
          this.tableList = data.list
        } catch (e) {
          console.error(e)
        }
      },
      handleEdit(row) {
        this.title = '编辑'
        this.form = JSON.parse(JSON.stringify(row))
        this.addDialog2 = true
      },
      
      onSubmit() {
        this.$refs['form'].validate(valid => {
            if (valid) {
                yearMidPoolSave(this.form).then(res => {
                    if(res.code === 200) {
                        this.initData()
                        this.addDialog2 = false
                        this.$message({
                        type: 'success',
                        message: '操作成功'
                        })
                    }
                })
                
            } else {
                return false
            }
        })
        
      },
      closeAddDialog2() {
        this.addDialog2 = false
        if (this.$refs['form']) {
            this.$refs['form'].clearValidate() // 清除整个表单的校验
            this.$refs['form'].resetFields() // 清除整个表单的校验
        }
        this.form = {
            id: undefined,
            type: undefined,
            is_open: 1,
        }
      },
      handleDetails(row) {
        this.$router.push({
            path: './poolAwardList',
            query: {
                id: row.id
            }
        })
      },
      radioChange(val){
        console.log(val)
        this.listQuery.type = val
        this.initData()
      }
    }
  }
</script>
  
<style scoped>
  .imageStyle {
    width: 150px;
  }

  .radioBox {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .input{
    width: 200px;
  }
</style>
  